<template>
	<view>
		<!-- 头部 -->
		<view class="navbar">
			<u-icon @click="navigateBack" class="icon-left" name="arrow-left" color="#000" size="50"></u-icon>
			<text>编辑管理员信息</text>
		</view>
		<!-- 内容 -->
		<view class="section">
			<view class="upload-join" @click="uploadImag()">
				<image src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/relationship.png" mode=""></image>
				<!-- <view class="upload"><u-icon name="camera-fill" size="40" color="#fff"></u-icon></view> -->
				<view class="avartar">
					<image :src="imgsrc" style="width: 60rpx;height: 60rpx;border-radius: 50%;" mode=""></image>
				</view>
			</view>
			<view class="admin-join">
				<text>我是大宝的</text>
				<!-- <text style="float: right;color: #909399;font-size: 32rpx;">爷爷</text> -->
				<input style="float: right;color: #909399;font-size: 32rpx;width: 60rpx;" type="text" value=""
					v-model='relationship' placeholder="" />
			</view>
			<view class="admin-join">
				<text>手机号</text>
				<text style="float: right;color: #909399;font-size: 32rpx;">{{data.phone}}</text>
			</view>
			<view class="binding" @click="navigateBack"><text>确定</text></view>
		</view>
	</view>
	<!-- <image src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/camera.png" mode=""></image> -->
</template>

<script>
	export default {
		data() {
			return {
				relationship: '',
				array: [{
					name: '爸爸'
				}, {
					name: '妈妈'
				}, {
					name: '爷爷'
				}, {
					name: '奶奶'
				}, {
					name: '外公'
				}, {
					name: '外婆'
				}, {
					name: '其他'
				}],
				imgsrc: 'https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/camera.png',
				data: {}
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.data))
			this.data = data
			this.relationship = this.array[Number(data.name)].name
			console.log(this.relationship, 33, this.data)
		},
		methods: {
			navigateBack() {
				const find = this.array.some(ele => {
					return ele.name === this.relationship
				})
				if (!find) {
					this.$api.editAdmin({
						id: this.data.device_id,
						name: '6'
					}).then(res => {
						if (res.code === 200) {
							uni.showToast({
								title: '修改管理员信息成功！'
							})
						}
					})
				} else {
					this.array.forEach((ele, idx) => {
						if (this.relationship === ele.name) {
							this.$api.editAdmin({
								id: this.data.device_id,
								name: idx.toString()
							}).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: '修改管理员信息成功！'
									})
								}
							})
						}
					})
				}
				uni.navigateTo({
					url: '../administrators'
				})
			},
			uploadImag() {
				uni.showActionSheet({
					itemList: ['查看头像', '从相册选择'],
					success: (res) => {
						let index = res.tapIndex;
						if (index == 0) {
							//查看头像
							var avatarArr = [];
							avatarArr.push(this.imgsrc)
							uni.previewImage({
								urls: avatarArr,
								current: avatarArr[0]
							})
						} else if (index == 1) {
							//选择头像上传
							uni.chooseImage({
								count: 1,
								sizeType: ["compressed"],
								sourceType: ["album"],
								success: (res) => {
									var filePath = res.tempFilePaths[0];
									//跳转相册选择组件
									uni.navigateTo({
										url: "upload/upload?tempFilePath=" +
											filePath
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	// 头部
	.navbar {
		padding-top: 90rpx;
		padding-bottom: 40rpx;
		width: 750rpx;
		color: #000;
		background-color: #fff;
	}

	.navbar>text {
		font-size: 36rpx;
		padding-left: 200rpx;
		font-weight: bold;
	}

	// 内容
	.section {
		padding: 30rpx;
	}

	image {
		width: 200rpx;
		height: 200rpx;
		margin-left: 240rpx;
	}

	.upload-join {
		position: relative;
	}

	.upload {
		background-color: rgb(68, 92, 223);
		padding: 10rpx;
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		left: 54%;
		top: 65%;
	}

	.avartar {
		display: flex;
		align-items: center;
		margin: 30rpx;
		position: absolute;
		right: 32%;
		top: 56%;
	}

	.admin-join {
		border-bottom: rgb(238, 238, 238) solid 1rpx;
		font-size: 36rpx;
		padding: 30rpx;
		padding-top: 50rpx;
	}

	.binding {
		box-shadow: 1px 1px 2px rgb(228, 227, 227), 0 0 5px rgb(228, 227, 227), 0 0 1px rgb(228, 227, 227);
		border-radius: 50rpx;
		text-align: center;
		margin-bottom: 35rpx;
		padding: 20rpx;
		font-size: 36rpx;
		background-color: rgb(68, 92, 223);
		color: #fff;
		margin-top: 300rpx;
		margin-bottom: 500rpx;
	}
</style>
